<!DOCTYPE html>
<html ng-app="app">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="../js/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
		<title></title>
	</head>
	<body ng-controller="con">
		<div class="box">
		<nav class="navbar navbar-default">
  <div class="container-fluid">
  	
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#" class="zi">Start Bootstrap</a>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     
      <ul class="nav navbar-nav navbar-right">
      	<li class="Link"><a href="#" class="dropdown-toggle" data-toggle="dropdown">官网</a></li>
        <li class="Link"><a href="#" class="dropdown-toggle" data-toggle="dropdown">联系我们</a></li>
        <li class="Link"><a href="#" class="dropdown-toggle" data-toggle="dropdown">加入我们</a></li>
    </div>
  </div>
</nav>
<div></div>
<div class="container">
	<div class="col-lg-6" style="color: white !important;">
		
			<div id="main" style=" height:300px; color: white !important;"></div>
		
	</div>
	<div class="col-lg-6" style="text-align: center; margin-top: 55px;">
		<div style="width: 390px; height:230px;text-align: center;background: rgba(0,0,0,0.5);color: white;">
			<br />
			<h1 style="font-size: 3rem; color: white;">商品信息表</h1>
		商品：<input type="text"  class="form-group" ng-model="name" style="color: black;"/><br />
		单价：<input type="text" class="form-group" ng-model="dan" style="color: black;"/><br />
		数量：<input type="text" class="form-group" ng-model="shu" style="color: black;"/><br />
		<button class="btn btn-danger" ng-click="add()">添加</button>
		<button class="btn btn-danger" ng-click="arr={}">清空购物车</button>
		<button class="btn btn-danger">编辑</button>
	</div>
		</div>
	
	<div class="col-lg-12" style="font-size: 16px;padding-bottom: 300px;box-sizing: border-box;">
		<table class="table table-condensed tab">
			<tr>
				<td>序号</td>
				<td>全选<input type="checkbox" ng-model="quan"></td>
				<td>商品</td>
				<td>单价</td>
				<td>数量</td>
				<td>小计</td>
				<td>操作</td>
			</tr>
			<tr ng-repeat="item in arr">
				<td>{{$index+1}}</td>
				<td><input type="checkbox" ng-checked="quan"></td>
				<td>{{item.name}}</td>
				<td>{{item.dan}}</td>
				<td><button class="btn btn-primary" ng-click="jian($index)">-</button><input type="text" style="width:5rem;height: 31px; border: 0;color: black;" ng-model="item.shu"><button class="btn btn-primary" ng-click="jia($index)">+</button></td>
				<td>{{item.dan*item.shu}}</td>
				<td><button class="btn btn-success"ng-click="del($index)">删除</button></td>
			</tr>
			
			
		</table>
</div>
</div>
<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../bootstrap/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/angular.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="build/dist/echarts.js" type="text/javascript" charset="utf-8"></script>-->
<script src="build/dist/echarts.js"></script>
		<script type="text/javascript">
		//3 配置路径
        //3 配置路径
        require.config({
            paths: {
                echarts: 'build/dist' //配置路径
            }
        });
        //4 使用模块
        require(
                [
                    'echarts',
                    'echarts/chart/bar', // 柱状图使用柱状图就加载bar模块，按需加载
                    'echarts/chart/line',//折线图模板
                    'echarts/chart/pie'// 饼图模板
                ],
                function(ec){
                 var myChart=ec.init(document.getElementById("main"));
                 option = {
    title : {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['蒸发量','降水量']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'蒸发量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'降水量',
            type:'bar',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            markPoint : {
                data : [
                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
         
    ]
   
};
// 为echarts对象加载数据
            myChart.setOption(option);
 }
)
var app=angular.module("app",[]);
		app.controller("con",function($http,$scope){
			$http.get("json.json").success(function(data){
				 $scope.arr=data.name
			 console.log($scope.arr)
			})
			
			
			
		
		    //数量+
			 $scope.jia=function(index){
			 	$scope.arr[index].shu++
			 	zong()
			 }
			//数量-
			 $scope.jian=function(index){
			 	if($scope.arr[index].shu>0){
			 		$scope.arr[index].shu--
			 		zong()
			 	}
			 }
			 
			 //添加
			 $scope.add=function(){
			 	
			 	$scope.arr.push({"name":$scope.name,"dan":$scope.dan,"shu":$scope.shu})
			 	$scope.name="";
			 	$scope.dan="";
			 	$scope.shu="";
			 	zong()
			 }
			 //删除
			 $scope.del=function(index){
			 	if(confirm("确定要删除吗？")){
			 		$scope.arr.splice(index,1)
			 	}
			 	zong()
			 }
			 
		})
                    
		</script>
	</body>
</html>
